<template>
  <view class="address-card">
    <view class="address-card-content">
      <view class="content-title">
        <text>{{ addressInfo.username }}</text>
        <text>{{ addressInfo.phone }}</text>
      </view>
      <view class="content-address">
        <text>{{ addressInfo.province_name }}</text>
        <text>{{ addressInfo.city_name }}</text>
        <text>{{ addressInfo.district_name }}</text>
        <text>{{ addressInfo.detail_name }}</text>
      </view>
    </view>
    <view class="address-card-footer">
      <view @tap="handleToAddressPage">
        <image :lazy-load="true" src="@/assets/icon/edit-address.png" />
        <text>编辑</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    addressInfo: {
      type: Object,
      default: () => {
        return {
          id: "5",
          student_id: "1",
          username: "带带大师兄",
          phone: "15196847990",
          province_id: "510000",
          city_id: "510100",
          district_id: "510107",
          desc_address: "那个",
          created_at: "2020-11-25 15:44:18",
          updated_at: "2020-11-25 15:46:15",
          deleted_at: null,
          province_name: "四川省",
          city_name: "成都市",
          district_name: "桂溪街道",
          detail_name: "四川省成都市桂溪街道那个"
        };
      }
    }
  },
  methods: {
    handleToAddressPage() {
      this.$emit("edit");
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.address-card {
  width: 690px;
  height: 272px;
  background: #ffffff;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  &-content {
    padding: 32px 30px;
    .content-title {
      margin-bottom: 12px;
      @include base-text(44px, 32px, #303133);
      @include textEllipsis;
      text {
        &:last-child {
          font-weight: 400;
          margin-left: 32px;
        }
      }
    }
    .content-address {
      line-height: 40px;
      @include base-text(80px, 28px, #303133, 400);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text {
        margin-right: 12px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  &-footer {
    border-top: 1px solid #f3f3f3;
    padding-right: 32px;
    @include normal-flex(flex-end);
    @include base-text(72px, 28px, #909399, 400);
    view {
      @include normal-flex(flex-start);
      image {
        margin-right: 8px;
        height: 28px;
        width: 28px;
      }
    }
  }
}
</style>
